<template>
  <div class="flex flex-col flex-grap-4">
    <div class="card flex flex-row flex-gap-2">
      <el-date-picker v-model="visitDate" format="YYYY-MM-DD" />
      <el-input v-model="inputText" style="width: 240px" />
      <el-button @click="refresh">刷新</el-button>
    </div>
    <div class="card"></div>

    <div
      class="card"
      style="
        box-sizing: border-box;
        display: flex;
        flex-flow: column wrap;
        justify-items: flex-start;
        width: 600px;
        height: 600px;
      "
    >
      <div v-for="(item, index) in data" :key="index" style="width: 260px">
        <el-card>
          <div class="flex flex-col gap-2">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="科室">{{ item.deptName }}</el-descriptions-item>
              <el-descriptions-item label="医生">{{ item.doctorName }}</el-descriptions-item>
              <el-descriptions-item label="号类">{{ item.clinicType }}</el-descriptions-item>
              <el-descriptions-item label="剩余">{{ item.remainNum }}</el-descriptions-item>
            </el-descriptions>
            <el-button type="success" size="small" @click="registerPayRef.display(item)">挂号</el-button>
          </div>
        </el-card>
      </div>
    </div>
    <RegisterConfirmPay ref="registerPayRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { type RegisterScheduleRes, type RegisterScheduleDayItemRes, RegisterBusAPIs } from '@/api/register'
import { dayjs } from 'element-plus'
import RegisterConfirmPay from '@/views/register/components/RegisterConfirmPay.vue'

const visitDate = ref<Date>(new Date())
const inputText = ref('')
const registerPayRef = ref<any>()
const data = ref<RegisterScheduleDayItemRes[]>([])

/**刷新 */
async function refresh() {
  data.value = await RegisterBusAPIs.getScheduleDayItems({ visitDate: dayjs(visitDate.value).format('YYYY-MM-DD') })
}
</script>

<style lang="scss" scoped>
.label-item-container {
  overflow-y: scroll;
}
</style>
